<template>
	<view class="mainCon">
		<view class="orderList">
			
			<view class="headForm">
				<u-form :model="formData" ref="uForm" label-width="160">
					<u-form-item label="箱状态" prop="R1">
						<u-input v-model="formData.R1Label" type="select" :select-open="listShow"
						@click="listShow = true" placeholder="请选择箱状态"/>
					</u-form-item>
					
					<u-form-item label="提单号">
						<u-input v-model="formData.tidanhao" placeholder="请输入提单号"/>
					</u-form-item> 	
					
					<u-form-item label="箱号">
						<u-input v-model="formData.CNTR" placeholder="请输入箱号"/>
					</u-form-item>
				</u-form>
			
				<view class="btnGroup">
					<u-button :custom-style="customStyle" type="primary" @click="getList">查询</u-button>
				</view>
			</view>
			<view style="height: 50rpx;"></view>
				
			<view class="orderItem" v-for="(item,index) in orderList">
				<view class="orderHead">
					<view class="headcell">
						<view class="leftCon">
							<view class="labelTag">
								提单号：
							</view>
							{{item.BILL_NO}}
						</view>
					</view>
					<view class="headcell">
						<view class="dateLabel">
							动态时间 : {{$u.timeFormat(item.IN_OUT_CY_TIM, 'yyyy-mm-dd hh:MM:ss')}}
						</view>
					</view>
				</view>
				<view class="orderInfo">
					
					
					<view class="infoCell">
						<view class="labelName">
							箱号
						</view>
						<view class="infoCon">
							{{item.CNTR}}
						</view>
					</view>
					
					<view class="infoCell">
						<view class="labelName">
							箱尺
						</view>
						<view class="infoCon">
							{{item.CNTR_SIZ_COD}}
						</view>
					</view>
					
					<view class="infoCell">
						<view class="labelName">
							箱型
						</view>
						<view class="infoCon">
							{{item.CNTR_TYP_COD}}
						</view>
					</view>
					
					<view class="infoCell">
						<view class="labelName">
							空重标志
						</view>
						<view class="infoCon">
							<span v-if="item.E_F_ID == 'F'">重箱</span>
							<span v-if="item.E_F_ID == 'E'">空箱</span>
						</view>
					</view>
					
					<view class="infoCell">
						<view class="labelName">
							箱状态
						</view>
						<view class="infoCon">
							{{item.NAME}}
						</view>
					</view>
					
					<view class="infoCell">
						<view class="labelName">
							重量
						</view>
						<view class="infoCon">
							{{item.CNTR_GROSS_WGT}}
						</view>
					</view> 
					
					<view class="infoCell">
						<view class="labelName">
							箱属
						</view>
						<view class="infoCon">
							{{item.CNTR_CORP_COD}}
						</view>
					</view>
					
				</view>
			</view>
		</view>

		<view style="margin-top: 100rpx;" v-if="orderList.length==0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		
		<u-select mode="single-column" :list="list" v-model="listShow" @confirm="listConfirm"
			value-name="value" label-name="name">
		</u-select>
		
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					width: '150px',
					height: '70rpx'
				},
				orderList: [],
				itemList: [],
				listShow: false,
				formData: {
					R1Label: "",
					R1: '',
					CNTR: '',
					tidanhao: ''
				},
				list: [
					{ name: '在港箱' , value: 1},
					// { name: '历史箱' , value: 2}
				],
				rules: {
					R1: [{ required: true, message: '箱状态不能为空' }],
					tidanhao: [{ required: true, message: '提单号不能为空' }],
				}
			}
		},
		onLoad() {
			// this.getList()
			this.formData.R1 = 1
			this.formData.R1Label = '在港箱'
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			// 请求数据
			getList() {
				this.$refs.uForm.validate(valid => {
					if(valid) { 
						if(!this.formData.CNTR && !this.formData.tidanhao) {
							this.$refs.uTips.show({
								title: '箱号和提单号必须填一个！',
								type: 'warning',
								duration: '2500'
							})
							return
						}
						uni.request({
							url: 'https://api.zlkj-port.com/szgjptapi/zlkj/handlingbill/getInoutcyByTidanExport?CNTR=' + this.formData.CNTR +
							'&R1='+ this.formData.R1 +
							'&tidanhao=' + this.formData.tidanhao ,
							method: "get",
							success: (res) => {
								// console.log(res)
								this.orderList = res.data
								// this.orderList = this.orderList.map(obj => {
								//   obj.IN_OUT_CY_TIM = new Date(obj.IN_OUT_CY_TIM)
								//   return obj
								// })
								// this.itemList = []
								// const groupedArray = this.orderList.reduce((accumulator, currentItem) => {
								//   if (!accumulator[currentItem.CNTR]) {
								//     accumulator[currentItem.CNTR] = []
								//   }
								//   accumulator[currentItem.CNTR].push(currentItem)
								//   return accumulator
								// }, {}) // 初始值为一个空对象，每个键值对表示一个组
								
								// console.log('分组：', groupedArray)
								// Object.entries(groupedArray).forEach(([key, value]) => {
								// 	value = value.sort((a, b) =>{
								// 		 return b.IN_OUT_CY_TIM - a.IN_OUT_CY_TIM
								// 	})
								// 	console.log('排序:', value)
								// 	this.itemList.push(value[0])
								// })
								
								// this.orderList = this.itemList
								// console.log('结果:', this.itemList)
								uni.hideLoading()
								// COAU7244568480
							}
						})
					} 
				})
			},
			listConfirm(val) {
				console.log(val)
				this.formData.R1Label = val[0].label
				this.formData.R1 = val[0].value
				console.log(this.formData.R1)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F1F9;
	}

	.mainCon {
		.tabHead {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #FFFFFF;

			.tabItem {
				width: 160rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				text-align: center;
				border: 1rpx solid #1A75FF;
				color: #868887;
				font-size: 26rpx;
			}

			.active {
				background-color: #1A75FF;
				color: #FFFFFF;
			}
		}

		.orderList {
			width: 700rpx;
			margin: 20rpx auto;

			.orderItem {
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.orderHead {
					.headcell {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.leftCon {
							display: flex;
							align-items: center;

							.labelTag {
								background-color: #E0EDFB;
								color: #4C86E7;
								width: 150rpx;
								line-height: 50rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								text-align: center;
								margin-right: 15rpx;
							}
						}

						.status1 {
							color: #4C86E7;
							font-size: 26rpx;
						}

						.dateLabel {
							color: #858585;
						}

						.status2 {
							color: #E94340;
							font-size: 30rpx;
						}
					}
				}

				.orderInfo {
					margin-top: 20rpx;
					border-top: 1rpx dashed #C1C3C2;
					padding-top: 20rpx;

					.infoCell {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.labelTag {
							background-color: #E0EDFB;
							color: #4C86E7;
							width: 150rpx;
							line-height: 50rpx;
							border-radius: 25rpx;
							font-size: 26rpx;
							text-align: center;
							margin-right: 15rpx;
						}

						.labelName {
							color: #C1C3C2;
							font-size: 28rpx;
							margin-right: 15rpx;
							width: 175rpx;
						}

						.infoCon {
							color: #87888A;
						}
					}
				}

				.bottomActions {
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.delete {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}

					.confirm {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}
				}
			}
		}
	}
</style>
